Home Explore Help
Register Sign In
jamesperet
/
portfolio-go
Watch 1
Star 0
Fork 0

Browse Source
Angular routing with animations

James Peret 10 years ago
parent
d03b82ed15
commit
3af064c9f7
13 changed files with 524 additions and 225 deletions
Show Diff Stats
  1. 0 139
      app/content/Data.json
  2. 41 25
      app/index.html
  3. 48 54
      app/scripts/app.js
  4. 43 0
      app/scripts/controllers/background.js
  5. 16 0
      app/scripts/controllers/index.js
  6. 49 0
      app/scripts/controllers/navigation.js
  7. 54 0
      app/scripts/controllers/slideshow.js
  8. 103 0
      app/scripts/data.json
  9. 57 6
      app/styles/main.css
  10. 0 0
      app/views/index.html
  11. 14 0
      app/views/slideshow.html
  12. 13 1
      bower.json
  13. 86 0
      npm-debug.log

+ 0 - 139
app/content/Data.json
View File 

@@ -1,139 +0,0 @@
1 
-{
2 
-  "website-name" : "Portfolio Go",
3 
-	"content" : [
4 
-		  {
5 
-				"title"  : "Desenhos",
6 
-				"id"     : "1",
7 
-	    			"slides" : [
8 
-	    				"content/images/triptico.jpg",
9 
-					"content/images/A3.jpg",
10 
-					"content/images/escultura_01.jpg",
11 
-					"content/images/trifonia-01.png"
12 
-	    			]
13 
-			},
14 
-		     {
15 
-				"title"  : "Esculturas",
16 
-				"id"     : "2",
17 
-	    			"slides" : [
18 
-					"content/images/escultura_01.jpg",
19 
-					"content/images/trifonia-01.png"
20 
-	    			]
21 
-			},
22 
-		     {
23 
-				"title"  : "Poemas",
24 
-				"id"     : "3",
25 
-	    			"slides" : [
26 
-					"content/images/trifonia-01.png",
27 
-					"content/images/triptico.jpg",
28 
-	    			]
29 
-			},
30 
-		     {
31 
-				"title"  : "Filmes",
32 
-				"id"     : "4",
33 
-	    			"slides" : [
34 
-					"content/images/trifonia-01.png",
35 
-					"content/images/triptico.jpg",
36 
-	    			]
37 
-			},
38 
-		     {
39 
-				"title"  : "Fotos Contexto Humano",
40 
-				"id"     : "5",
41 
-	    			"slides" : [
42 
-					"content/images/trifonia-01.png",
43 
-					"content/images/triptico.jpg",
44 
-	    			]
45 
-			},
46 
-		     {
47 
-				"title"  : "Textos Críticos",
48 
-				"id"     : "6",
49 
-	    			"slides" : [
50 
-					"content/images/trifonia-01.png",
51 
-					"content/images/triptico.jpg",
52 
-	    			]
53 
-			},
54 
-		     {
55 
-				"title"  : "Currículo",
56 
-				"id"     : "7",
57 
-	    			"slides" : [
58 
-					"content/images/trifonia-01.png",
59 
-					"content/images/triptico.jpg",
60 
-	    			]
61 
-			}
62 
-	    ],
63 
-	    "navigation" : [
64 
-		    {
65 
-			    	"title"  : "Desenhos",
66 
-				"type"   : "sub-nav",
67 
-			     "id"     : "101",
68 
-				"navigation" : [
69 
-					{
70 
-			    			"title"  : "Caligramas",
71 
-						"type"   : "content",
72 
-						"id"     : "1"
73 
-					},
74 
-					{
75 
-			    			"title"  : "Figuras",
76 
-						"type"   : "content",
77 
-						"id"     : "2"
78 
-					},
79 
-					{
80 
-			    			"title"  : "Cadernos",
81 
-						"type"   : "content",
82 
-						"id"     : "3"
83 
-					}
84 
-				]
85 
-		    },
86 
-		    {
87 
-		    		"title"  : "Esculturas",
88 
-				"type"   : "sub-nav",
89 
-			     "id"     : "102",
90 
-				"navigation" : [
91 
-					{
92 
-			    			"title"  : "Carvão & Tule",
93 
-						"type"   : "content",
94 
-						"id"     : "1"
95 
-					},
96 
-					{
97 
-			    			"title"  : "Sono (Vidros)",
98 
-						"type"   : "content",
99 
-						"id"     : "2"
100 
-					},
101 
-					{
102 
-			    			"title"  : "Relevos",
103 
-						"type"   : "content",
104 
-						"id"     : "3"
105 
-					},
106 
-					{
107 
-			    			"title"  : "Cut-outs",
108 
-						"type"   : "content",
109 
-						"id"     : "3"
110 
-					}
111 
-				]
112 
-		    },
113 
-		    {
114 
-		    		"title"  : "Poemas",
115 
-				"type"   : "content",
116 
-			     "id"     : "5"
117 
-		    },
118 
-		    {
119 
-		    		"title"  : "Filmes",
120 
-				"type"   : "content",
121 
-			     "id"     : "6"
122 
-		    },
123 
-		    {
124 
-		    		"title"  : "Fotos",
125 
-				"type"   : "content",
126 
-			     "id"     : "7"
127 
-		    },
128 
-		    {
129 
-		    		"title"  : "Textos",
130 
-				"type"   : "content",
131 
-			     "id"     : "8"
132 
-		    },
133 
-		    {
134 
-		    		"title"  : "Currículo",
135 
-				"type"   : "content",
136 
-			     "id"     : "9"
137 
-		    }
138 
-	    ]
139 
-}

+ 41 - 25
app/index.html
View File 

@@ -10,40 +10,56 @@
10 10
11 11 
 		<!-- bower:js -->
12 12
13 
-		<script src="../bower_components/angular/angular.js"></script>
13 
+    <script src="../bower_components/angular/angular.js"></script>
14 
+    <script src="../bower_components/angular-animate/angular-animate.js"></script>
15 
+    <script src="../bower_components/angular-cookies/angular-cookies.js"></script>
16 
+    <script src="../bower_components/angular-resource/angular-resource.js"></script>
17 
+    <script src="../bower_components/angular-route/angular-route.js"></script>
18 
+    <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
19 
+    <script src="../bower_components/angular-touch/angular-touch.js"></script>
14 20 
 		<script src="../bower_components/famous-angular/dist/famous-angular.js"></script>
15 21 
 		<script src="../bower_components/famous/dist/famous-global.js"></script>
22 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
23 
+    <script src="../bower_components/ngFx/dist/ngFx.min.js"></script>
16 24 
 		<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
17 25
18 26 
 		<!-- endbower -->
19 27
20 28 
 		<script src="scripts/app.js"></script>
29 
+    <script src="scripts/controllers/index.js"></script>
30 
+    <script src="scripts/controllers/background.js"></script>
31 
+    <script src="scripts/controllers/navigation.js"></script>
32 
+    <script src="scripts/controllers/slideshow.js"></script>
21 33
22 34 
 </head>
23 35 
 <body ng-app="goApp">
24 
-	<fa-app ng-controller='indexController' id="app1">
25 
-
26 
-
27 
-
28 
-		<fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]">
29 
-		 	<fa-video-surface
30 
-		 	           fa-video-url="content/videos/bg_1.mov"
31 
-		 	           class="video"
32 
-		 	           fa-options="{autoplay:true, setAttributes: 'loop'}" >
33 
-		 	</fa-video-surface>
34 
-		</fa-modifier>
35 
-	</fa-app>
36 
-	<fa-app ng-controller='indexController' id="app2">
37 
-	<fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]" fa-index="1">
38 
-		<ui-view style="position: absolute; z-index: 2;">
39 
-				<fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" >
40 
-					  <fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'" >
41 
-					    {{data.message}}
42 
-					  </fa-surface>
43 
-					 </fa-modifier>
44 
-				 </fa-modifier>
45 
-		</ui-view>
46 
-	</fa-modifier>
47 
-	</fa-app>
36 
+
37 
+	<div ng-controller='BackgroundController' class="layer-background">
38 
+    <fa-app id="app1">
39 
+      <fa-render-node fa-node="backgroundView" id="render"></fa-render-node>
40 
+    </fa-app>
41 
+  </div>
42 
+
43 
+  <div ng-controller='NavigationController' class="layer-menu">
44 
+    <ul class="nav-menu">
45 
+      <li ng-repeat="item in navigation" class='fx-fade-normal fx-speed-1000'>
46 
+        <a ng-click="btnNavclick($index)" class="btn-menu">{{item.title}}</a>
47 
+      </li>
48 
+    </ul>
49 
+    <ul class="nav-menu submenu">
50 
+      <li ng-repeat="item in subNavigation" class='fx-fade-normal fx-speed-200'>
51 
+        <a ng-click="btnSubNavclick($index)" class="btn-menu">{{item.title}}</a>
52 
+      </li>
53 
+    </ul>
54 
+    <ul class="nav-menu submenu">
55 
+      <li ng-repeat="item in sub2Navigation" class='fx-fade-normal fx-speed-200'>
56 
+        <a ng-click="btnSub2Navclick($index)" class="btn-menu">{{item.title}}</a>
57 
+      </li>
58 
+    </ul>
59 
+  </div>
60 
+
61 
+  <div ng-view></div>
62 
+
63 
+
48 64 
 </body>
49 65 
 </html>

+ 48 - 54
app/scripts/app.js
View File 

@@ -1,54 +1,48 @@
1 
-var goApp = angular.module('goApp', ['famous.angular']);
2 
-
3 
-var controllers = {};
4 
-   controllers.indexController = function($scope, $famous, $timeline) {
5 
-  $scope.data = {message: "Hello"};
6 
-
7 
-  var Transitionable = $famous['famous/transitions/Transitionable'];
8 
-  var Easing = $famous['famous/transitions/Easing'];
9 
-
10 
-  $scope.t = new Transitionable(0);
11 
-
12 
-  $scope.translation = $timeline([
13 
-    [0, [100, 100, 100], Easing.inOutQuad],
14 
-    [0.25, [400, 200, 100], Easing.inOutQuad],
15 
-    [0.5, [300, 300, 100], Easing.inOutQuad],
16 
-    [0.75, [200, 500, 100], Easing.inOutQuad],
17 
-    [1, [100, 100, 100], Easing.inOutQuad],
18 
-  ]);
19 
-
20 
-  $scope.startAnimations = function(){
21 
-    $scope.t.delay((1000), function(){ // we will delay each animation based on index
22 
-        $scope.t.set(1, {duration: 3400}, function(){
23 
-
24 
-
25 
-
26 
-        });
27 
-    });
28 
-  }
29 
-
30 
-  var preload = new createjs.LoadQueue();
31 
-  preload.addEventListener("fileload", handleFileComplete);
32 
-  preload.loadFile('content/videos/bg_1.mov');
33 
-  function handleFileComplete(event) {
34 
-      console.log('File Loaded')
35 
-      $scope.startAnimations();
36 
-
37 
-         // Make the video loop
38 
-         var video = $famous.find('.video')[0].renderNode; video.on('deploy', function(){
39 
-           var player = video._currTarget;
40 
-           player.controls = true;
41 
-           player.loop = true;
42 
-           player.onprogress = console.log('video is downloading');
43 
-         });
44 
-
45 
-  }
46 
-
47 
-
48 
-
49 
-   };
50 
-
51 
-
52 
-
53 
-
54 
-goApp.controller(controllers);
1 
+'use strict';
2 
+
3 
+/**
4 
+ * @ngdoc overview
5 
+ * @name domainManagerApp
6 
+ * @description
7 
+ * # domainManagerApp
8 
+ *
9 
+ * Main module of the application.
10 
+ */
11 
+angular
12 
+  .module('goApp', [
13 
+    'ngAnimate',
14 
+    'ngCookies',
15 
+    'ngResource',
16 
+    'ngRoute',
17 
+    'ngSanitize',
18 
+    'ngTouch',
19 
+    'famous.angular',
20 
+    'ngFx',
21 
+    'goApp.index',
22 
+    'goApp.background',
23 
+    'goApp.navigation',
24 
+    'goApp.slideshow'
25 
+  ])
26 
+
27 
+  .config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
28 
+
29 
+    // Configs
30 
+    //Enable cross domain calls
31 
+    //$httpProvider.defaults.useXDomain = true;
32 
+    //Remove the header used to identify ajax call  that would prevent CORS from working
33 
+    //delete $httpProvider.defaults.headers.common['X-Requested-With'];
34 
+
35 
+    // Routes
36 
+    $routeProvider
37 
+      .when('/', {
38 
+        templateUrl: 'views/index.html',
39 
+        controller: 'IndexController'
40 
+      })
41 
+      .when('/:slideshowId', {
42 
+        templateUrl: 'views/slideshow.html',
43 
+        controller: 'SlideshowController'
44 
+      })
45 
+      .otherwise({
46 
+        redirectTo: '/'
47 
+      });
48 
+  }])

+ 43 - 0
app/scripts/controllers/background.js
View File 

@@ -0,0 +1,43 @@
1 
+'use strict';
2 
+
3 
+/**
4 
+ * @ngdoc function
5 
+ * @name domainManagerApp.controller:AboutCtrl
6 
+ * @description
7 
+ * # AboutCtrl
8 
+ * Controller of the domainManagerApp
9 
+ */
10 
+angular.module('goApp.background', ['famous.angular'])
11 
+  .controller('BackgroundController',['$scope', '$rootScope', '$famous', '$timeline', function ($scope,  $rootScope, $famous, $timeline) {
12 
+
13 
+    var View = $famous['famous/core/View'];
14 
+    var Modifier = $famous['famous/core/Modifier'];
15 
+    var Surface = $famous['famous/core/Surface'];
16 
+    var Transform = $famous['famous/core/Transform'];
17 
+    var VideoSurface = $famous['famous/surfaces/VideoSurface'];
18 
+
19 
+    $scope.backgroundView = new View();
20 
+
21 
+    var video = new VideoSurface({
22 
+        size: [undefined, undefined],
23 
+        autoplay: true,
24 
+        src: "content/videos/bg_1.mov",
25 
+        classes: ['bg_video'],
26 
+        properties: {
27 
+            zIndex: 1,
28 
+        }
29 
+    });
30 
+    video.setAttributes({
31 
+        loop: ''
32 
+     });
33 
+
34 
+    var videoModifier = new Modifier();
35 
+    videoModifier.transformFrom(function(){
36 
+
37 
+        transform: Transform.translate(0, 0, 0)
38 
+    });
39 
+
40 
+    $scope.backgroundView.add(videoModifier).add(video);
41 
+
42 
+
43 
+  }]);

+ 16 - 0
app/scripts/controllers/index.js
View File 

@@ -0,0 +1,16 @@
1 
+'use strict';
2 
+
3 
+/**
4 
+ * @ngdoc function
5 
+ * @name domainManagerApp.controller:AboutCtrl
6 
+ * @description
7 
+ * # AboutCtrl
8 
+ * Controller of the domainManagerApp
9 
+ */
10 
+angular.module('goApp.index', ['famous.angular', 'ngFx', 'ngAnimate'])
11 
+  .controller('IndexController',['$scope', '$rootScope', '$famous', '$timeline', function ($scope,  $rootScope, $famous, $timeline) {
12 
+
13 
+
14 
+
15 
+
16 
+  }]);

+ 49 - 0
app/scripts/controllers/navigation.js
View File 

@@ -0,0 +1,49 @@
1 
+'use strict';
2 
+
3 
+/**
4 
+ * @ngdoc function
5 
+ * @name domainManagerApp.controller:AboutCtrl
6 
+ * @description
7 
+ * # AboutCtrl
8 
+ * Controller of the domainManagerApp
9 
+ */
10 
+angular.module('goApp.navigation', ['famous.angular', 'ngRoute', 'ngFx', 'ngAnimate'])
11 
+  .controller('NavigationController',['$scope', '$rootScope', '$famous', '$timeline', '$http', '$location', '$route', '$timeout', function ($scope,  $rootScope, $famous, $timeline, $http, $location, $route, $timeout) {
12 
+
13 
+    $http({
14 
+      method: 'GET',
15 
+      url: 'scripts/data.json'
16 
+    }).success(function(data) {
17 
+      $timeout(function(){
18 
+        $scope.navigation = data.navigation;
19 
+      },500);
20 
+    });
21 
+
22 
+    $scope.subNavigation = []
23 
+    $scope.sub2Navigation = []
24 
+    $scope.last_click = ""
25 
+
26 
+    $scope.btnNavclick = function(index){
27 
+      if($scope.navigation[index].link == 'submenu') {
28 
+        if($scope.last_click != $scope.navigation[index].title){
29 
+          console.log("Opening submenu: " + $scope.navigation[index].title)
30 
+          $scope.subNavigation = $scope.navigation[index].submenu;
31 
+        } else if ($scope.last_click == $scope.navigation[index].title && $scope.subNavigation.length == 0) {
32 
+          $scope.subNavigation = $scope.navigation[index].submenu;
33 
+          console.log("Opening submenu: " + $scope.navigation[index].title)
34 
+        } else {
35 
+          $scope.subNavigation = [];
36 
+          console.log("Closing submenu: " + $scope.navigation[index].title)
37 
+        }
38 
+        $scope.last_click = $scope.navigation[index].title
39 
+      } else {
40 
+        console.log("Redirecting to page " + $scope.navigation[index].link)
41 
+        $location.path($scope.navigation[index].link);
42 
+      }
43 
+    }
44 
+
45 
+    $scope.btnSubNavclick = function(index){
46 
+      $scope.sub2Navigation = $scope.subNavigation[index].submenu;
47 
+    }
48 
+
49 
+  }]);

+ 54 - 0
app/scripts/controllers/slideshow.js
View File 

@@ -0,0 +1,54 @@
1 
+'use strict';
2 
+
3 
+/**
4 
+ * @ngdoc function
5 
+ * @name domainManagerApp.controller:AboutCtrl
6 
+ * @description
7 
+ * # AboutCtrl
8 
+ * Controller of the domainManagerApp
9 
+ */
10 
+angular.module('goApp.slideshow', ['ngFx', 'ngAnimate'])
11 
+  .controller('SlideshowController',['$scope', '$rootScope', '$famous', '$timeline', '$location', '$route', '$timeout', function ($scope,  $rootScope, $famous, $timeline, $location, $route, $timeout) {
12 
+
13 
+    $scope.data = {message: "Hello World"};
14 
+
15 
+    // FadeIn
16 
+    $timeout(function(){
17 
+      $scope.showView = true;
18 
+    },100);
19 
+
20 
+    $scope.fadeOut = function() {
21 
+      $scope.showView = false;
22 
+      $timeout(function(){
23 
+        $location.path("/");
24 
+      },500);
25 
+    }
26 
+
27 
+
28 
+    // Moving Cube
29 
+    var Transitionable = $famous['famous/transitions/Transitionable'];
30 
+    var Easing = $famous['famous/transitions/Easing'];
31 
+
32 
+    $scope.t = new Transitionable(0);
33 
+
34 
+    $scope.translation = $timeline([
35 
+      [0, [500, 400, 100], Easing.inOutQuad],
36 
+      [0.25, [400, 200, 100], Easing.inOutQuad],
37 
+      [0.5, [300, 300, 100], Easing.inOutQuad],
38 
+      [0.75, [200, 500, 100], Easing.inOutQuad],
39 
+      [1, [100, 100, 100], Easing.inOutQuad],
40 
+    ]);
41 
+
42 
+    $scope.startAnimations = function(){
43 
+      $scope.t.delay((1000), function(){ // we will delay each animation based on index
44 
+          $scope.t.set(1, {duration: 3400}, function(){
45 
+            // Animation Completion Callback
46 
+          });
47 
+      });
48 
+    }
49 
+
50 
+    //$scope.startAnimations();
51 
+
52 
+
53 
+
54 
+  }]);

+ 103 - 0
app/scripts/data.json
View File 

@@ -0,0 +1,103 @@
1 
+{
2 
+  "website-name" : "Portfolio Go",
3 
+	"navigation" :
4 
+  [
5 
+    {
6 
+      "title"   : "Desenhos",
7 
+      "link"    : "submenu",
8 
+      "submenu" :
9 
+      [
10 
+        {
11 
+          "title"   : "Caligramas",
12 
+          "link"    : "#/caligramas"
13 
+        },
14 
+        {
15 
+          "title"   : "Figuras",
16 
+          "link"    : "#/figuras"
17 
+        },
18 
+        {
19 
+          "title"   : "Cadernos",
20 
+          "link"    : "submenu",
21 
+          "submenu" :
22 
+          [
23 
+            {
24 
+              "title"   : "York Cathedral",
25 
+              "link"    : "#/york-cathedral"
26 
+            },
27 
+            {
28 
+              "title"   : "Bologramas",
29 
+              "link"    : "#/bologramas"
30 
+            },
31 
+            {
32 
+              "title"   : "Sarrafos & Garranchos",
33 
+              "link"    : "#/sarrafos-e-garranchos"
34 
+            }
35 
+          ]
36 
+        }
37 
+      ]
38 
+
39 
+    },
40 
+    {
41 
+      "title"   : "Esculturas",
42 
+      "link"    : "submenu",
43 
+      "submenu" :
44 
+      [
45 
+        {
46 
+          "title" : "Carvão & Tule",
47 
+          "link"  : "#/carvao-e-tule"
48 
+        },
49 
+        {
50 
+          "title": "Sono (vidros)",
51 
+          "link" : "#/sono"
52 
+        },
53 
+        {
54 
+          "title" : "Relevos",
55 
+          "link"  : "#/relevos"
56 
+        },
57 
+        {
58 
+          "title" : "cut-outs",
59 
+          "link"  : "#/cut-outs"
60 
+        }
61 
+      ]
62 
+    },
63 
+    {
64 
+      "title"  : "poemas",
65 
+      "link"   : "#/poemas"
66 
+    },
67 
+    {
68 
+      "title"   : "filmes",
69 
+      "link"    : "submenu",
70 
+      "submenu" :
71 
+      [
72 
+        {
73 
+          "title" : "Trifonia",
74 
+          "link"  : "#/trifonia"
75 
+        },
76 
+        {
77 
+          "title" : "Sonho contra-sono",
78 
+          "link"  : "#sonho-contra-sono"
79 
+        },
80 
+        {
81 
+          "title" : "Animações",
82 
+          "link"  : "#/animacoes"
83 
+        },
84 
+        {
85 
+          "title" : "Performances",
86 
+          "link"  : "#/performances"
87 
+        }
88 
+      ]
89 
+    },
90 
+    {
91 
+      "title" : "Fotos Contexto Humano",
92 
+      "link"  : "#/fotos-contexto-humano"
93 
+    },
94 
+    {
95 
+      "title" : "Textos Críticos",
96 
+      "link"  : "#/textos-criticos"
97 
+    },
98 
+    {
99 
+      "title" : "Currículo",
100 
+      "link"  : "/curriculo"
101 
+    }
102 
+  ]
103 
+}

+ 57 - 6
app/styles/main.css
View File 

@@ -13,6 +13,51 @@ body {
13 13 
   backface-visibility: visible;
14 14 
 }
15 15
16 
+/* Layers */
17 
+.layer-background {
18 
+  z-index: 1;
19 
+  position: absolute;
20 
+  top: 0;
21 
+  right: 0;
22 
+  bottom: 0;
23 
+  left: 0
24 
+}
25 
+.layer-menu {
26 
+  z-index: 2;
27 
+  position: absolute;
28 
+}
29 
+ng-view {
30 
+  z-index: 4;
31 
+}
32 
+.layer-content {
33 
+  z-index: 3;
34 
+  position: absolute;
35 
+  top: 0;
36 
+  right: 0;
37 
+  bottom: 0;
38 
+  left: 0;
39 
+  width: 100%;
40 
+  height: 100%;
41 
+  background-color: rgba(0,0,0,0.7);
42 
+}
43 
+
44 
+.bg-dark { background-color: black;}
45 
+
46 
+/* Navigation */
47 
+.nav-menu {
48 
+  list-style: none;
49 
+  padding-left: 15px;
50 
+  float: left;
51 
+}
52 
+.nav-menu li {
53 
+  padding-left: 0px;
54 
+}
55 
+
56 
+.submenu {
57 
+  float: left;
58 
+  padding-left: 5px;
59 
+}
60 
+
16 61 
 .btn-menu {
17 62 
   color: black;
18 63 
   border: none;
 
@@ -22,30 +67,30 @@ body {
22 67 
   font-family: Helvetica;
23 68 
   text-align: left;
24 69 
   font-weight: 600;
25 
-  margin-left: 15px;
26 
-  margin-right: 15px;
70 
+  margin-left: 0px;
71 
+  margin-right: 8px;
27 72 
   margin-bottom: 15px;
28 73 
   cursor: pointer;
74 
+  text-decoration: none;
75 
+  padding-top: 1px;
29 76 
 }
30 
-
31 77 
 .btn-menu:hover {
32 78 
   color: white;
33 79 
   background-color: black;
80 
+  text-decoration: none;
34 81 
 }
35 
-
36 82 
 .btn-slideshow {
37 83 
   cursor: pointer;
38 84 
   background-color: white;
39 85 
 }
40 
-
41 86 
 .btn-slideshow:hover {
42 87 
   background-color: #F2F2F2;
43 88 
   color: red;
44 89 
 }
45 90
46 91 
 video {
47 
-  width: auto    !important;
48 92 
   height: 100%   !important;
93 
+  width: auto    !important;
49 94 
 }
50 95
51 96 
 fa-app {
 
@@ -55,3 +100,9 @@ fa-app {
55 100 
   bottom: 0;
56 101 
   left: 0;
57 102 
 }
103 
+
104 
+.famous-angular-clipping-container, .famous-angular-container {
105 
+  height: 100%;
106 
+  width: 100%;
107 
+  overflow: hidden;
108 
+}

+ 0 - 0
app/views/index.html
View File


+ 14 - 0
app/views/slideshow.html
View File 

@@ -0,0 +1,14 @@
1 
+<div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView" ng-click="fadeOut()">
2 
+  <fa-app id="app2">
3 
+  <fa-modifier fa-size="[true, true]" fa-origin="[0,0]" fa-translate="[0, 0, 0]" fa-index="1">
4 
+    <ui-view style="position: absolute; z-index: 2;">
5 
+        <fa-modifier fa-size="[100, 100]" fa-translate="translation(t.get())" >
6 
+            <fa-surface fa-background-color="'#FA5C4F'" fa-color="'red'" >
7 
+              {{data.message}}
8 
+            </fa-surface>
9 
+           </fa-modifier>
10 
+         </fa-modifier>
11 
+    </ui-view>
12 
+  </fa-modifier>
13 
+</fa-app>
14 
+</div>

+ 13 - 1
bower.json
View File 

@@ -19,6 +19,18 @@
19 19 
   ],
20 20 
   "dependencies": {
21 21 
     "famous-angular": "~0.5.2",
22 
-    "requirejs": "~2.1.17"
22 
+    "angular": "~1.3.8",
23 
+    "requirejs": "~2.1.17",
24 
+    "angular-animate": "^1.3.0",
25 
+    "angular-cookies": "^1.3.0",
26 
+    "angular-resource": "^1.3.0",
27 
+    "angular-route": "^1.3.0",
28 
+    "angular-sanitize": "^1.3.0",
29 
+    "angular-touch": "^1.3.0",
30 
+    "jQuery": "~2.1.4",
31 
+    "ngFx": "~1.1.0"
32 
+  },
33 
+  "resolutions": {
34 
+    "angular": "1.3.8"
23 35 
   }
24 36 
 }

+ 86 - 0
npm-debug.log
View File 

@@ -0,0 +1,86 @@
1 
+0 info it worked if it ends with ok
2 
+1 verbose cli [ 'node', '/usr/local/bin/npm', 'i', 'ngFx', '--save' ]
3 
+2 info using npm@2.1.11
4 
+3 info using node@v0.10.33
5 
+4 verbose node symlink /usr/local/bin/node
6 
+5 warn package.json famous-angular@0.1.0 No description
7 
+6 warn package.json famous-angular@0.1.0 No repository field.
8 
+7 warn package.json famous-angular@0.1.0 No README data
9 
+8 silly cache add args [ 'ngFx', null ]
10 
+9 verbose cache add spec ngFx
11 
+10 silly cache add parsed spec { raw: 'ngFx',
12 
+10 silly cache add   scope: null,
13 
+10 silly cache add   name: 'ngFx',
14 
+10 silly cache add   rawSpec: '',
15 
+10 silly cache add   spec: '*',
16 
+10 silly cache add   type: 'range' }
17 
+11 verbose addNamed ngFx@*
18 
+12 silly addNamed semver.valid null
19 
+13 silly addNamed semver.validRange *
20 
+14 silly addNameRange { name: 'ngFx', range: '*', hasData: false }
21 
+15 silly mapToRegistry name ngFx
22 
+16 silly mapToRegistry using default registry
23 
+17 silly mapToRegistry registry https://registry.npmjs.org/
24 
+18 silly mapToRegistry uri https://registry.npmjs.org/ngFx
25 
+19 verbose addNameRange registry:https://registry.npmjs.org/ngFx not in flight; fetching
26 
+20 verbose request uri https://registry.npmjs.org/ngFx
27 
+21 verbose request no auth needed
28 
+22 info attempt registry request try #1 at 02:32:43
29 
+23 verbose request id 0862c01a676044ee
30 
+24 http request GET https://registry.npmjs.org/ngFx
31 
+25 http 404 https://registry.npmjs.org/ngFx
32 
+26 verbose headers { server: 'CouchDB/1.5.0 (Erlang OTP/R16B03)',
33 
+26 verbose headers   'content-type': 'application/json',
34 
+26 verbose headers   'cache-control': 'max-age=0',
35 
+26 verbose headers   'content-length': '51',
36 
+26 verbose headers   'accept-ranges': 'bytes',
37 
+26 verbose headers   date: 'Thu, 28 May 2015 05:32:45 GMT',
38 
+26 verbose headers   via: '1.1 varnish',
39 
+26 verbose headers   age: '0',
40 
+26 verbose headers   connection: 'keep-alive',
41 
+26 verbose headers   'x-served-by': 'cache-jfk1032-JFK',
42 
+26 verbose headers   'x-cache': 'MISS',
43 
+26 verbose headers   'x-cache-hits': '0',
44 
+26 verbose headers   'x-timer': 'S1432791164.980871,VS0,VE21' }
45 
+27 silly get cb [ 404,
46 
+27 silly get   { server: 'CouchDB/1.5.0 (Erlang OTP/R16B03)',
47 
+27 silly get     'content-type': 'application/json',
48 
+27 silly get     'cache-control': 'max-age=0',
49 
+27 silly get     'content-length': '51',
50 
+27 silly get     'accept-ranges': 'bytes',
51 
+27 silly get     date: 'Thu, 28 May 2015 05:32:45 GMT',
52 
+27 silly get     via: '1.1 varnish',
53 
+27 silly get     age: '0',
54 
+27 silly get     connection: 'keep-alive',
55 
+27 silly get     'x-served-by': 'cache-jfk1032-JFK',
56 
+27 silly get     'x-cache': 'MISS',
57 
+27 silly get     'x-cache-hits': '0',
58 
+27 silly get     'x-timer': 'S1432791164.980871,VS0,VE21' } ]
59 
+28 verbose stack Error: 404 Not Found: ngFx
60 
+28 verbose stack     at CachingRegistryClient.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:239:14)
61 
+28 verbose stack     at Request._callback (/usr/local/lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:172:14)
62 
+28 verbose stack     at Request.self.callback (/usr/local/lib/node_modules/npm/node_modules/request/request.js:372:22)
63 
+28 verbose stack     at Request.emit (events.js:98:17)
64 
+28 verbose stack     at Request.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/request/request.js:1317:14)
65 
+28 verbose stack     at Request.emit (events.js:117:20)
66 
+28 verbose stack     at IncomingMessage.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/request/request.js:1265:12)
67 
+28 verbose stack     at IncomingMessage.emit (events.js:117:20)
68 
+28 verbose stack     at _stream_readable.js:943:16
69 
+28 verbose stack     at process._tickCallback (node.js:419:13)
70 
+29 verbose statusCode 404
71 
+30 verbose pkgid ngFx
72 
+31 verbose cwd /Users/v/dev/portfolio-go
73 
+32 error Darwin 13.4.0
74 
+33 error argv "node" "/usr/local/bin/npm" "i" "ngFx" "--save"
75 
+34 error node v0.10.33
76 
+35 error npm  v2.1.11
77 
+36 error code E404
78 
+37 error 404 Not Found: ngFx
79 
+37 error 404
80 
+37 error 404 'ngFx' is not in the npm registry.
81 
+37 error 404 You should bug the author to publish it (or use the name yourself!)
82 
+37 error 404 It was specified as a dependency of 'famous-angular'
83 
+37 error 404
84 
+37 error 404 Note that you can also install from a
85 
+37 error 404 tarball, folder, http url, or git url.
86 
+38 verbose exit [ 1, true ]